<template>
	<view class="page">
	
		<view class="container">
			<!-- 购物车列表 -->
			<!-- <mescroll-body ref="mescrollRef"
			               @down="downCallback"
			               @up="upCallback"
			               :down="downOption"
			               :up="upOption"
			               :top="0"> -->
			<!-- 	<view class="tab-one flex-box">
					<view class="li box-1"><text class="active">一般贸易(0)</text></view>
					<view class="li box-1"><text>保税商品(0)</text></view>
					<view class="li box-1"><text>直邮商品(0)</text></view>
				</view> -->
		       <sideslip-car ref="mycar" 
			   @selAllBtn="selAllBtn" 
			   @delBtn="delBtn" 
			   @touchEv="touchEv" 
			   class="sideslip-car" 
			   @selThis="selThis" 
			   @jsBtn="jsBtn" @changeNum="changeNum" :carts="carts"></sideslip-car>
			   <!-- </mescroll-body> -->
		</view>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
  // 引入mescroll-mixins.js
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import sideslipCar from '../../components/sideslip-car/sideslip-car.vue'
	export default {
    mixins: [MescrollMixin], // 使用mixin
		components:{
			TabBar,
			sideslipCar
		},
		data() {
			return {
				carts: [
				   
				   
				], // 购物车列表
        mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
        // 下拉刷新的配置(可选, 绝大部分情况无需配置)
        downOption: {},
        // 上拉加载的配置(可选, 绝大部分情况无需配置)
        upOption: {
          use: false,
          toTop: {
            src: '',
          }
        },
		isEdit: false,
        goodsList:[
        
        ],
			};
		},
		onReady() {
			uni.hideTabBar()
		},
		onLoad(){
			this.getCarts()
		},
    methods:{
		getCarts(){
			this.$u.api.cartAlist().then(res => {
				if (res.status) {
					res.msg.forEach(function(item,index,arr){
						item.selected = false
					})
					this.carts = res.msg
				}
			})
			.catch(err => {
				console.log(err);
			})
		},
		jsBtn:function(ids){
		    console.log(ids);
			this.$f.jump('/pages/ConfirmOrder/ConfirmOrderConverge?par='+ids+'&isCart='+1)
		},
		changeNum:function(carts){
		
		    this.carts = carts;
		    this.$refs.mycar.getTotalPrice();
		},
		selThis:function(carts){
		    this.carts = carts;
		    this.$refs.mycar.getTotalPrice();
		},
		selAllBtn:function(carts){
		    this.carts = carts;
		    this.$refs.mycar.getTotalPrice();
		},
		touchEv:function(carts){
		    this.carts = carts;
		},
		delBtn:function(carts,ids,index){
			let _this = this
			console.log(1111,carts,ids,index,'返回')
			this.$u.api.cartOperate({
				sku_id:ids,
				type: 'del'
			})
			.then(res => {
				if (res.status) {
					
					uni.showToast({
						title: '删除成功',
						icon: 'success',
						duration: 1500,
						success: function(){
							carts.splice(index, 1);
							
							_this.carts = carts;
							_this.$refs.mycar.getTotalPrice();
						}
					});
				}
			})
			.catch(err => {
				console.log(err);
			})
		  
		},
      /*下拉刷新的回调, 有三种处理方式:*/
      downCallback(){
        this.mescroll.endSuccess();
      },
      /*上拉加载的回调*/
      upCallback(page) {
        setTimeout(() =>{
          this.mescroll.endByPage(10, 20);
        },2000)
      },
      /**
       * 跳转点击
       * @param {String} type 跳转类型
       */
      onSkip(type){
        switch (type){
          case 'classify':
            uni.navigateTo({
              url: '/pages/SearchGoodsList/SearchGoodsList',
            })
            break;
          case 'goods':
            uni.navigateTo({
              url: '/pages/GoodsDetails/GoodsDetails',
              animationType: 'zoom-fade-out',
              animationDuration: 200
            })
            break;
        }
      }
    }
	}
</script>

<style lang="scss">
	page{
	     background: #f5f5f5;
		 .tab-one{
			text-align:center;
			width:100%;
			padding:30rpx 0;
		 	text{
				
			}	
			.active{
				color:#c92139;
			}
		 }
	   }
	   
	   view,textarea,input,text,button{
	     padding: 0;
	     margin: 0;
	     box-sizing:border-box;
	     font-size: 28rpx;
	     font-family: "微软雅黑";
	   }
	   .uni-checkbox-input{
	       border-radius: 50% !important;
	   }
	   .container {
	       height: 100%;
	       display: flex;
	       flex-direction: column;
	       align-items: center;
	       justify-content: space-between;
	       box-sizing: border-box;
	       background: #f5f5f5;
	       overflow: hidden;
	   }
	   .line1{
	       overflow: hidden;
	       text-overflow: ellipsis;
	       display: box;
	       display: -webkit-box;
	       line-clamp: 1;
	       box-orient: vertical;
	       -webkit-line-clamp: 1;
	       -webkit-box-orient: vertical;
	       word-break: break-all; /* 英文换行问题 */
	   }
	   .line2 {
	       overflow: hidden;
	       text-overflow: ellipsis;
	       display: box;
	       display: -webkit-box;
	       line-clamp: 2;
	       box-orient: vertical;
	       -webkit-line-clamp: 2;
	       -webkit-box-orient: vertical;
	       word-break: break-all; /* 英文换行问题 */
	   }
	   .centerboth {
	       display:flex;
	       display: -webkit-flex;
	       align-items:center;
	       -webkit-align-items:center;
	       justify-content: center;
	       -webkit-justify-content: center;
	   }
	   .clearfix:after {
	       content: "";
	       display: block;
	       visibility: hidden;
	       height: 0;
	       clear: both;
	   }
	
	   .clearfix {
	       zoom: 1;
	   }
	   image{
	     padding: 0;
	     margin: 0;
	   }
	   textarea {
	     width:300rpx;
	     height:75rpx;
	     display:block;
	     position:relative;
	     font-size: 28rpx;
	   }
	   button::after{ border: none; }
	   input:-ms-input-placeholder {
	       color: #808080;
	   }
	   .container {
	       background: #F5F5F5;
	   }
	   .container {
	       width: 100%;
	       padding: 0 24rpx;
	   }
	   .sideslip-car{
	       width: 100%;
	   }
</style>
